<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>jqueryMobile</title>
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1 ，user-scalable=no">
		<!-- 引入 jQuery Mobile 样式 -->
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
		<style>
			body,
			input,
			select,
			textarea,
			button,
			.ui-btn {font-family: "微软雅黑";}
			div[class|="ui-grid"]{text-align: center;}
			div[class*="listview-grid"] button{display: inline-block;margin:0;}
			tr:nth-child(even) {background: #e9e9e9;}
			table td:first-child{width:20%;border-right:1px solid #ddd;text-align: center;}
			table td{border-bottom: 1px solid #ddd;}
			div.ui-img{margin:1em 0;}
			div.ui-img a{display:block;margin-bottom:1em;}
			div.ui-img a:last-child{margin-bottom: 0;}
			div.ui-img img{display:block;width: 100%;height: auto;}
			.commentator{padding-right:.2em;}
			.pull-right{float: right;}
		</style>
		<!-- 引入 jQuery 库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 引入 jQuery Mobile 库 -->
		<script src="js/jquery.mobile-1.4.5.min.js"></script>
	</head>
	<body>	
		<div id="page1" data-role="page" data-theme="a">
			<div id="settingPanel" data-role="panel" data-display="overlay" data-position="left" data-position-fixed="true">
				<h4>设置面板</h4>
				<div class="ui-field-contain">
					<label for="switchNight">夜间</label>
					<select id="switchNight" name="switchNight" data-role="slider" data-corners="false" data-mini="true">
						<option value="day" selected="selected">关</option>
						<option value="night">开</option>
					</select>
				</div>
			</div>
			<div id="userPanel" data-role="panel" data-display="overlay" data-position="right" data-position-fixed="true">
				<h4>用户面板</h4>
				<form method="post" action="a.php">
					<label for="userName">用户名</label>
					<input type="text" name="userName" placeholder="用户名" id="userName" data-corners="false" />
					<label for="userPassword">输入密码</label>
					<input type="text" name="userPassword" placeholder="密码" id="userPassword" data-corners="false" />
					<label for="userPasswordR">再次输入密码</label>
					<input type="text" name="userPasswordR" placeholder="再次密码" id="userPasswordR" data-corners="false" />
					<input type="submit" value="登录" data-inline="true" data-corners="false" />
					<input type="submit" value="注册" data-inline="true" data-corners="false" />
				</form>
			</div>
			<div data-role="header" data-position="fixed" data-tap-toggle="false">
				<h1>摔跤吧</h1>
			</div>
			<div data-role="main" class="ui-content">
				<form data-corners="fasle">
					<div data-role="collapsible-set">
						<fieldset data-role="collapsible" data-iconpos="right">
							<legend>折叠</legend>
							<label for="text">文本</label>
							<input type="text" name="text" id="text" data-clear-btn="true" />
							<fieldset data-role="controlgroup" data-type="horizontal">
								<legend>多选框</legend>
								<label for="checkbox1">选项</label>
								<input type="checkbox" name="checkbox" id="checkbox1" />
								<label for="checkbox2">选项</label>
								<input type="checkbox" name="checkbox" id="checkbox2" />
								<label for="checkbox3">选项</label>
								<input type="checkbox" name="checkbox" id="checkbox3" />
							</fieldset>
							<label for="range1">滑动条</label>
							<input type="range" name="range" id="range1" value="50" min="0" max="100" data-highlight="true" />
							<input type="checkbox" name="flipswitch" id="flipswitch" data-role="flipswitch" data-on-text="开" data-off-text="关" />
							<label for="switch">切换开关</label>
							<select name="switch" id="switch" data-role="slider">
								<option value="on">on</option>
								<option value="off">off</option>
							</select>
						</fieldset>
						<fieldset data-role="collapsible" data-iconpos="right">
							<legend>折叠</legend>
							<label for="text">文本</label>
							<input type="text" name="text" id="text" data-clear-btn="true" />
							<label>多选框</label>
							<label for="checkbox11">选项</label>
							<input type="checkbox" name="checkbox" id="checkbox11" />
							<label for="checkbox22">选项</label>
							<input type="checkbox" name="checkbox" id="checkbox22" />
							<label for="checkbox33">选项</label>
							<input type="checkbox" name="checkbox" id="checkbox33" />
							<label for="range2">滑动条</label>
							<input type="range" name="range" id="range2" value="50" min="0" max="100" />
						</fieldset>
					</div>
				</form>
				
				
				<ul data-role="listview" data-inset="true" data-icon="false" data-corners="false">
					<li data-role="list-divider">出租房</li>
					<li>
						<a href="#page2" data-transition="flow">
							<h1>两室一厅</h1>
							<p><b>西青县高新产业园区</b></p>
							<p>新装两室一厅，家具齐全，干净卫生..</p>
							<p class="ui-li-aside">发布时间：2017.5.18</p>
						</a>
					</li>
					<li>
						<div class="ui-grid-b listview-grid">
							<div class="ui-block-a">
								<button class="ui-btn ui-corner-all ui-icon-heart ui-btn-icon-notext">喜欢</button>
							</div> 
							<div class="ui-block-b">
								<button class="ui-btn ui-corner-all ui-icon-comment ui-btn-icon-notext">评论</button>
							</div>
							<div class="ui-block-c">
								<button class="ui-btn ui-corner-all ui-icon-action ui-btn-icon-notext">分享</button>
							</div>
						</div>
					</li>
				</ul>
				<ul data-role="listview" data-inset="true" data-icon="false" data-corners="false">
					<li data-role="list-divider">出租房</li>
					<li>
						<a href="#page2" data-transition="turn">
							<h1>两室一厅</h1>
							<p><b>西青县高新产业园区</b></p>
							<p>新装两室一厅，家具齐全，干净卫生..</p>
							<p class="ui-li-aside">发布时间：2017.5.18</p>
						</a>
					</li>
					<li>
						<div class="ui-grid-b listview-grid">
							<div class="ui-block-a">
								<button class="ui-btn ui-corner-all ui-icon-heart ui-btn-icon-notext">喜欢</button>
							</div> 
							<div class="ui-block-b">
								<button class="ui-btn ui-corner-all ui-icon-comment ui-btn-icon-notext">评论(100)</button>
							</div>
							<div class="ui-block-c">
								<button class="ui-btn ui-corner-all ui-icon-action ui-btn-icon-notext">分享</button>
							</div>
						</div>
					</li>
				</ul>
				<ul data-role="listview" data-inset="true" data-icon="false" data-corners="false">
					<li data-role="list-divider">出租房</li>
					<li>
						<a href="#page2" data-transition="flip">
							<h1>两室一厅</h1>
							<p><b>西青县高新产业园区</b></p>
							<p>新装两室一厅，家具齐全，干净卫生..</p>
							<p class="ui-li-aside">发布时间：2017.5.18</p>
						</a>
					</li>
					<li>
						<div class="ui-grid-b listview-grid">
							<div class="ui-block-a">
								<button class="ui-btn ui-corner-all ui-icon-heart ui-btn-icon-notext">喜欢</button>
							</div> 
							<div class="ui-block-b">
								<button class="ui-btn ui-corner-all ui-icon-comment ui-btn-icon-notext">评论</button>
							</div>
							<div class="ui-block-c">
								<button class="ui-btn ui-corner-all ui-icon-action ui-btn-icon-notext">分享</button>
							</div>
						</div>
					</li>
				</ul>
				
			</div>
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div class="ui-grid-c">
					<div class="ui-block-a">
						<a href="#settingPanel" class="ui-btn ui-btn-b ui-corner-all ui-icon-gear ui-btn-icon-notext">设置</a>
					</div> 
					<div class="ui-block-b">
						<a href="#home" class="ui-btn ui-btn-b ui-corner-all ui-icon-home ui-btn-icon-notext">首页</a>
					</div>
					<div class="ui-block-c">
						<a href="#userPanel" class="ui-btn ui-btn-b ui-corner-all ui-icon-user ui-btn-icon-notext">个人中心</a>
					</div>
					<div class="ui-block-d">
						<a id="a" href="#userPanel" class="ui-btn ui-btn-b ui-corner-all ui-icon-recycle ui-btn-icon-notext">刷新</a>
					</div>
				</div>
			</div>
		</div>
		<!--page2-->
		<div data-role="page" id="page2">
			<div id="businessmanPanel" data-role="panel" data-display="overlay" data-position="right" data-position-fixed="true">
				<ul data-role="listview">
					<li data-role="list-divider">用户信息</li>
					<li>
						<h1>姓名：<span>张张</span></h1>
						<p>主营：<span>*******</span></p>
					</li>
					<li data-role="list-divider">联系方式</li>
					<li>
						<p><b>电话：</b><b>12365478963</b></p>
					</li>
					<li>
						<p><b>微信：</b><b>12365478963</b></p>
					</li>
				</ul>
			</div>
			<div data-role="header" data-position="fixed">
				<a href="" class="ui-btn" data-rel="back">返回</a>
				<h1>page2</h1>
			</div>
			<div data-role="main" class="ui-content">
				<table class="ui-table ui-shadow">
					<tr>
						<td>类型</td>
						<td>笔记本电脑</td>
					</tr>
					<tr>
						<td>品牌</td>
						<td>戴尔</td>
					</tr>
					<tr>
						<td>配置</td>
						<td>*****</td>
					</tr>
				</table>
				<div class="ui-img ui-shadow">
					<a href="#imgA" data-rel="popup" data-position-to="window" data-transition="fade">
						<img src="css/images/user_jpg/a.jpg" alt="" />
					</a>
					<a href="#imgA" data-rel="popup" data-position-to="window" data-transition="fade">
						<img src="css/images/user_jpg/a.jpg" alt="" />
					</a>
					<a href="#imgA" data-rel="popup" data-position-to="window" data-transition="fade">
						<img src="css/images/user_jpg/a.jpg" alt="" />
					</a>
				</div>
				<div data-role="popup" id="imgA">
					<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
					<img src="css/images/user_jpg/a.jpg" alt="" />
				</div>
				
				<ul data-role="listview" data-inset="true" data-corners="false" >
					<li data-role="list-divider">评论</li>
					<li>
						<p class="commentator"><b>老李</b><i class="pull-right">2017-1-8</i></p>
						<p>老李老李老李老李老李老李老李老李</p>
					</li>
					<li>
						<p class="commentator"><b>老李</b><i class="pull-right">2017-1-8</i></p>
						<p>老李老李老李老李老李老李老李老李</p>
					</li>
					<li>
						<p class="commentator"><b>老李</b><i class="pull-right">2017-1-8</i></p>
						<p>老李老李老李老李老李老李老李老李</p>
					</li>
					<li>
						<p class="commentator"><b>老李</b><i class="pull-right">2017-1-8</i></p>
						<p>老李老李老李老李老李老李老李老李</p>
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed" style="text-align: center;">
				<a href="#businessmanPanel" class="ui-btn" >联系卖家</a>
			</div>
		</div>
		<script type="text/javascript">
			$(document).on('pagecreate',function(){
				$('#switchNight').on('change',function(){
					if($('#switchNight').val()=='night'){
						$('#page1,#page2').removeClass('ui-page-theme-a').addClass('ui-page-theme-b');
					}else{
						$('#page1,#page2').removeClass('ui-page-theme-b').addClass('ui-page-theme-a');
					}
				})
			})
		</script>
	</body>

</html>